<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>
		<style>
			.table li {
				float: left;
				min-width: 200px;
				max-width: 400px;
			}
			ul, li {
				list-style: none;
			}
			.clear {
				clear: both;
			}
			.none {
				display: none;
			}
		</style>
		<ul>
			<li><ul class="table none">
				<li>Seconds in month:</li>
				<li><input type="number" value="2629743.83" id="sim"></li>
			</ul></li>
			<li class="clear"></li>
			<li><ul class="table">
				<li>Persist every seconds:</li>
				<li><input type="number" value="15" id="se"></li>
			</ul></li>
			<li class="clear"></li>
			<li><ul class="table">
				<li>Over how many objects:</li>
				<li><input type="number" value="100" id="o"></li>
			</ul></li>
			<li class="clear"></li>
			<li><ul class="table">
				<li>Cost $:</li>
				<li><input type="number" value="" readonly id="r"></li>
			</ul></li>
		</ul>
		<br>
		<p>
			This page is for throughput calculation, it assumes continuous load non-stop.
		</p>
		<script>
			$(function(){
				var sim = $('#sim')
				,	se = $('#se')
				,	o = $('#o')
				,	r = $('#r')
				,	n = function(n){ return parseFloat(n) }
				$(document).on('keyup', function(){
					r.val(
						((( n(sim.val()) / n(se.val()) ) * n(o.val()) / 1000) * 0.005 ).toFixed(2)
					);
				})
			})
		</script>
	</body>
</html>
